{extend name="base"}
{block name="main"}
<div id="app" v-cloak>
	<el-row class="ws-quote">
		<el-col :span="10" >
			<el-button @click="onGet('{:url('cleanNodes')}')" type="danger" size="small">清除无效节点</el-button>
			<el-button @click="onGet('{:url('updateNodes')}')" type="primary" size="small">更新权限节点</el-button>
		</el-col>
	</el-row>
	<el-row class="p_y10">
		<el-col class="p_y10" :offset="2" :span="20">
			<el-input
			  placeholder="输入关键字进行过滤"
			  v-model="filterText">
			</el-input>
		</el-col>
		<el-col class="p_y10" :offset="2" :span="20">
			<el-tree
			  ref="authTree"
			  :data="nodes"
			  :props="options"
			  accordion
			  node-key="id"
			  :filter-node-method="filterNode"
			  >
			  	<span slot-scope="{node,data}">
				  	<el-tooltip :content="data.remark" placement="right-end" v-if="data.remark">
					    <span v-if="data.action!=='0'">
							{{data.title}}({{data.name}})
					    </span>
					    <span v-else>{{data.title}}</span>
				    </el-tooltip>

				    <template v-else>
					    <span v-if="data.action!=='0'">
							{{data.title}}({{data.name}})
					    </span>
					    <span v-else>{{data.title}}</span>
				    </template>
			    </span>
			</el-tree>
		</el-col>
	</el-row>
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script>
var app=new Vue({
	el:"#app",
	mixins:[wsMixins],
	data:{
		nodes:{$nodes|raw}, // 列表数据
		options:{
			label:'title'
		},
		filterText:'',
	},
	watch: {
      filterText(val) {
        this.$refs.authTree.filter(val);
      }
    },
	methods:{
		// 搜索过滤
		filterNode(value, data) {
        	if (!value) return true;
        	return data.title.indexOf(value)!== -1||data.name.indexOf(value)!==-1;
      	},
	}
})
</script>
{/block}